<template>
    <div class="main-container">
        <!-- 查询条件 -->
        <div class="query-container">
            <div class="query-title">查询条件</div>
            <div class="query-condition">
                <el-form ref="queryParams" :model="queryParams" label-width="80px" size="mini" inline>
                    <el-row>
                        <el-form-item label="登录账号">
                            <el-input v-model="queryParams.accountNo" placeholder="请输入登录账号"></el-input>
                        </el-form-item>
                        <el-form-item label="用户昵称">
                            <el-input v-model="queryParams.nickname" placeholder="请输入用户昵称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="queryTableList">查询</el-button>
                            <el-button @click="resetQueryForm">重置</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- 按钮工具栏 -->
        <div class="query-button-toolbar">
            <el-button type="primary" size="mini" @click="openAddOrEditDialog('')">新 增</el-button>
        </div>
        <!-- 查询结果 -->
        <div class="query-container">
            <div class="query-title">查询结果</div>
            <div class="query-table">
                <el-table :data="tableData" v-loading="loading" style="width: 100%" size="small" empty-text="空空如也"
                          stripe border>
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="accountNo" label="登录账号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="registerTime" label="注册日期" show-overflow-tooltip></el-table-column>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button @click="openDetailDialog(scope.row)" type="text" size="small">查看</el-button>
                            <el-button @click="openAddOrEditDialog(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteAction(scope.row.uid)" type="text" size="small">删除</el-button>
                            <el-button @click="openAssignRoleDialog(scope.row.uid)" type="text" size="small">分配角色
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页条件 -->
                <pagination small
                            v-show="pageParams.pageCount > 0"
                            :total="pageParams.pageCount"
                            :page.sync="pageParams.pageNum"
                            :limit.sync="pageParams.pageSize"
                            @pagination="queryTableList"/>
            </div>
        </div>

        <!-- 新增修改弹出框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" :close-on-click-modal="closeOnClickModal">
            <el-form :model="createForm" :rules="createFormRules" ref="createForm" size="mini">
                <el-input v-model="createForm.uid" v-show="false"></el-input>
                <el-form-item label="登录账号" label-width="120px" prop="accountNo">
                    <el-input v-model="createForm.accountNo" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" label-width="120px">
                    <el-input v-model="createForm.nickname" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" label-width="120px" prop="password">
                    <el-input v-model="createForm.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" label-width="120px" prop="confirmPassword">
                    <el-input v-model="createForm.confirmPassword" placeholder="请再次输入密码"></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="120px">
                    <el-input v-model="createForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="120px">
                    <el-input v-model="createForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addAccount" v-if="dialog.btnType" type="primary" size="mini">新 增</el-button>
                <el-button @click="editAccount" v-else type="primary" size="mini">编 辑</el-button>
                <el-button size="mini" @click="closeAddAndEditDialog">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 查看用户详情 -->
        <el-dialog title="查看详情" :visible.sync="detailDialog.visible" :close-on-click-modal="closeOnClickModal">
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        用户ID
                    </template>
                    {{ detailUserInfo.uid }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        登录账号
                    </template>
                    {{ detailUserInfo.accountNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        昵称
                    </template>
                    {{ detailUserInfo.nickname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        性别
                    </template>
                    {{ detailUserInfo.gender }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{ detailUserInfo.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        邮箱
                    </template>
                    {{ detailUserInfo.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        注册日期
                    </template>
                    {{ detailUserInfo.registerTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        用户状态
                    </template>
                    <el-tag type="success" v-if="detailUserInfo.enabled === '01'">启用</el-tag>
                    <el-tag type="danger" v-if="detailUserInfo.enabled === '02'">禁用</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="closeDetailDialog">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 分配角色弹出框 -->
        <el-dialog title="分配角色" :visible.sync="roleDialog.visible" :close-on-click-modal="closeOnClickModal">
            <el-table border stripe ref="roleMultipleTable"
                      :data="roleTableData" row-key="rid" tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column prop="roleKey" label="角色标识"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="assignRole">分 配</el-button>
                <el-button size="mini" @click="closeRoleDialog">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    createAccount,
    removeAccount,
    updateAccount,
    assignRoleToUser,
    queryPage,
} from "@/api/sys/account";
import {listAllRole, getUserRole} from "@/api/sys/role";
import Pagination from "@/components/Pagination";

export default {
    name: "AccountIndex",
    components: {Pagination},
    data() {
        return {
            pageParams: {
                pageCount: 0,
                pageNum: 1,
                pageSize: 10,
            },
            queryParams: {},
            tableData: [],
            loading: false,
            queryLoading: false,
            closeOnClickModal: false,
            dialog: {
                title: "新增账号",
                visible: false,
                btnType: true,
            },
            detailDialog: {
                visible: false,
            },
            roleDialog: {
                visible: false,
            },
            createForm: {
                uid: "",
                accountNo: "",
                nickname: "",
                password: "",
                confirmPassword: "",
                phone: "",
                email: "",
            },
            createFormRules: {
                accountNo: [
                    {required: true, message: "请输入登录账号", trigger: "blur"},
                    {min: 1, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "请输入登录密码", trigger: "blur"},
                    {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"},
                ],
                confirmPassword: [
                    {required: true, message: "请输入确认密码", trigger: "blur"},
                    {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"},
                ],
            },
            detailUserInfo: {
                uid: "",
                accountNo: "",
                nickname: "",
                phone: "",
                gender: "",
                email: "",
                enabled: "",
                registerTime: "",
            },
            multipleSelection: [],
            currentAccountId: "",
            roleTableData: [],
        };
    },
    created() {
        this.queryTableList();
    },
    methods: {
        /** 查询所有角色 */
        queryAllRole() {
            listAllRole().then((resp) => {
                if (resp.code === 20000) {
                    this.roleTableData = resp.data;
                } else {
                    this.$message.warning(resp.data.message);
                }
            }).catch((error) => {
                this.$message.warning(error.message);
            });
        },
        /** 查询表格数据 */
        queryTableList() {
            const _this = this;
            _this.queryParams.pageNum = _this.pageParams.pageNum;
            _this.queryParams.pageSize = _this.pageParams.pageSize;
            _this.loading = true;
            queryPage(_this.queryParams).then((resp) => {
                if (resp.code === 20000) {
                    _this.tableData = resp.data.record;
                    _this.pageParams.pageNum = resp.data.pageNum;
                    _this.pageParams.pageSize = resp.data.pageSize;
                    _this.pageParams.pageCount = resp.data.pageCount;
                } else {
                    _this.$message.warning(resp.message);
                }
                _this.loading = false;
            }).catch((error) => {
                _this.$message.warning(error.message);
                _this.loading = false;
            });
        },
        /** 重置查询条件 */
        resetQueryForm() {
            console.log("reset form");
            this.queryParams = {};
        },
        /** 删除操作 */
        deleteAction(id) {
            const _this = this;
            _this.$confirm("是否删除当前行数据?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                type: "warning",
            }).then(() => {
                removeAccount(id).then((resp) => {
                    if (resp.code === 20000) {
                        _this.$message.success(resp.message);
                        _this.queryTableList();
                    } else {
                        _this.$message.warning(resp.message);
                    }
                }).catch((error) => {
                    _this.$message.warning(error.message);
                });
            }).catch(() => {});
        },
        /** 打开编辑弹出框 */
        openAddOrEditDialog(row) {
            const _this = this;
            console.log("row-->:", row);
            if (row) {
                // 编辑
                _this.createForm.uid = row.uid;
                _this.createForm.nickname = row.nickname;
                _this.createForm.phone = row.phone;
                _this.createForm.password = "";
                _this.createForm.confirmPassword = "";
                _this.dialog.title = "编辑账号";
                _this.dialog.btnType = false;
            } else {
                // 新增
                _this.dialog.title = "新增账号";
                _this.dialog.btnType = true;
            }
            console.log("open dialog");
            _this.dialog.visible = true;
        },
        /** 新增账号 */
        addAccount() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid && _this.checkPassword()) {
                    createAccount(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.queryTableList();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 编辑账号 */
        editAccount() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid && _this.checkPassword()) {
                    updateAccount(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.queryTableList();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 校验密码 */
        checkPassword() {
            let password = this.createForm.password;
            let confirmPassword = this.createForm.confirmPassword;
            if (password !== confirmPassword) {
                this.$message.warning("两次密码不一致");
                return false;
            }
            return true;
        },
        /** 关闭弹出框 */
        closeAddAndEditDialog() {
            this.resetCreateForm();
            this.dialog.visible = false;
            console.log("close dialog");
        },
        /** 打开查看详情弹出框 */
        openDetailDialog(row) {
            console.log("open dialog");
            const _this = this;
            _this.$nextTick(function () {
                _this.detailUserInfo.uid = row.uid;
                _this.detailUserInfo.accountNo = row.accountNo;
                _this.detailUserInfo.nickname = row.nickname;
                _this.detailUserInfo.gender = row.gender;
                _this.detailUserInfo.phone = row.phone;
                _this.detailUserInfo.email = row.email;
                _this.detailUserInfo.registerTime = row.registerTime;
                _this.detailUserInfo.enabled = row.enabled;
                _this.detailDialog.visible = true;
            });
        },
        /** 关闭查看详情弹出框 */
        closeDetailDialog() {
            this.detailDialog.visible = false;
            console.log("close dialog");
        },
        /** 重置表单 */
        resetCreateForm() {
            this.$refs.createForm.clearValidate();
            this.createForm.uid = "";
            this.createForm.nickname = "";
            this.createForm.password = "";
            this.createForm.confirmPassword = "";
            this.createForm.phone = "";
            this.createForm.phone = "";
        },
        /** 打开分配角色弹出框 */
        async openAssignRoleDialog(uid) {
            try {
                await this.queryAllRole();
            } catch (error) {
                return;
            }
            this.roleDialog.visible = true;
            this.$nextTick(function () {
                this.currentAccountId = uid;
                this.$refs.roleMultipleTable.clearSelection();
                // 查询当前账号拥有的角色
                getUserRole(uid).then((response) => {
                    if (response.code === 20000) {
                        const item = response.data;
                        this.roleTableData.forEach((curRow) => {
                            if (item.findIndex((x) => x.rid === curRow.rid) !== -1) {
                                this.$refs.roleMultipleTable.toggleRowSelection(curRow, true);
                            }
                        });
                    } else {
                        this.$message.warning(response.message);
                    }
                }).catch((err) => {
                    this.$message.warning(err.message);
                });
            });
        },
        /** 多选表格行选择变化 */
        handleSelectionChange(val) {
            // 获取选择的所有行数据
            this.multipleSelection = val;
        },
        /** 确认分配角色 */
        assignRole() {
            // 判断是否选择行数据
            const _this = this;
            const rowData = _this.multipleSelection;
            if (rowData.length <= 0) {
                _this.$message.warning("请选择角色");
                return;
            }
            // 准备请求参数
            let params = [];
            for (let i = 0; i < rowData.length; i++) {
                let relaObj = {
                    uid: _this.currentAccountId,
                    rid: rowData[i].rid,
                };
                params.push(relaObj);
            }
            assignRoleToUser(params).then((resp) => {
                if (resp.code === 20000) {
                    _this.closeRoleDialog();
                    _this.$message.success(resp.message);
                } else {
                    _this.$message.warning(resp.message);
                }
            }).catch((error) => {
                _this.$message.warning(error.message);
            });
        },
        /** 关闭分配角色弹出框 */
        closeRoleDialog() {
            this.roleDialog.visible = false;
            this.currentAccountId = "";
        },
        /** methods end */
    },
};
</script>

<style lang="scss" scoped>
</style>